import React, { useState, useEffect } from 'react'
import { Table, Button, Input, Select } from 'antd';
import { getallshops, changeshops } from '../../apis/shops'
import qs, { stringify } from 'querystring'

const columns = [
    {
        title: '商铺ID',
        dataIndex: 'id',
    },
    {
        title: '商铺名称',
        dataIndex: 'shopName',
    },
    {
        title: '电话',
        dataIndex: 'tel',
    },
    {
        title: '地址',
        dataIndex: 'address',
    },
    {
        title: '身份证号',
        dataIndex: 'idCard',
    },
    {
        title: '负责人',
        dataIndex: 'managerName',
    },
    {
        title: '执照号',
        dataIndex: 'licenceNo',
    },
    {
        title: '状态',
        dataIndex: 'status',
    },
    {
        title: '执照照片',
        dataIndex: 'licenceImg',
    },
    {
        title: '操作',
        dataIndex: 'operation',
    },
];
export default function index() {
    const [selectedRowKeys, setselectedRowKeys] = useState([])
    const [loading, setloading] = useState(false)
    const [chargedata, setchargedata] = useState([])
    const [pageall, setpageall] = useState({
        pageSize: 1000,
        pageNum: 1,
        shopName: null,
        tel: null,
        managerName: null,
        idCard: null
    })
    const start = () => {
        console.log(1);
        setloading(true);
        setTimeout(() => {
            setselectedRowKeys([])
            setloading(false)
        }, 1000);
    };
    const onSelectChange = selectedRowKeys => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        setselectedRowKeys(selectedRowKeys)
    };
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };
    const hasSelected = selectedRowKeys.length > 0;
    const allcharge = async () => {
        const page = qs.stringify(pageall)
        const src = await getallshops(page)
        setchargedata(src.data.rows)
    }
    const examineon = async (data) => {
        console.log(data);
        const charge = {
            id: data.id,
            shopName: data.shopName,
            tel: data.tel,
            address: data.address,
            managerName: data.managerName,
            idCard: data.idCard,
            idCardImg: data.idCardImg,
            licenceNo: data.licenceNo,
            licenceImg: data.licenceImg,
            status: "同意"
        }
        const chargeone = qs.stringify(charge)
        const res = await changeshops(chargeone)
        allcharge()
    }
    const examineout = async (data) => {
        console.log(data);
        const charge = {
            id: data.id,
            shopName: data.shopName,
            tel: data.tel,
            address: data.address,
            managerName: data.managerName,
            idCard: data.idCard,
            idCardImg: data.idCardImg,
            licenceNo: data.licenceNo,
            licenceImg: data.licenceImg,
            status: "拒绝"
        }
        const chargeone = qs.stringify(charge)
        const res = await changeshops(chargeone)
        allcharge()
    }
    const [chagrename, setchargename] = useState()
    const [chargeuser, setchargeuser] = useState()
    const [chargeIDcard, setchargeIDcard] = useState()
    const [chargestatus, setchargestatus] = useState()
    const add = () => {
        console.log(chagrename, chargephone, chargeuser, chargeIDcard);
    }
    const clear = () => {
        setchargename()
        setchargeuser()
        setchargeIDcard()
        setchargestatus('')
    }
    const modify = async () => {
        const charge = {
            pageSize: 1000,
            pageNum: 1,
            id: null,
            shopName: chagrename,
            tel: null,
            address: null,
            managerName: chargeuser,
            idCard: chargeIDcard,
            idCardImg: null,
            licenceNo: null,
            licenceImg: null,
            status: chargestatus
        }
        const chargeone = qs.stringify(charge)
        const res = await getallshops(chargeone)
        setchargedata(res.data.rows)
    }
    useEffect(() => {
        allcharge()
    }, [])
    const data = [];
    for (let i = 0; i < chargedata.length; i++) {
        if (chargedata[i].licenceImg) {
            chargedata[i].licenceImg = <img src={chargedata[i].licenceImg} alt="" style={{ width: "50px" }} />
        }
        data.push({
            key: i,
            ...chargedata[i],
            operation:
                chargedata[i].status == "审核中" ? <div><Button onClick={() => examineon(chargedata[i])}>同意</Button><Button onClick={() => examineout(chargedata[i])}>驳回</Button></div> : ""
        });
    }
    const { Option } = Select;
    const handleChange = (value) => {
        setchargestatus(value)
    }
    return (

        <div>
            <div>
                <table style={{ margin: '0 auto' }}>
                    <tbody>
                        <tr>
                            <td>
                                名称：
                            </td>
                            <td>
                                <Input value={chagrename} onChange={(event) => setchargename(event.target.value)}></Input>
                            </td>
                            <td>
                                申请人姓名：
                            </td>
                            <td>
                                <Input value={chargeuser} onChange={(event) => setchargeuser(event.target.value)}></Input>
                            </td>
                            <td>
                                申请人身份证号：
                            </td>
                            <td>
                                <Input value={chargeIDcard} onChange={(event) => setchargeIDcard(event.target.value)}></Input>
                            </td>
                            <td>
                                审核状态：
                            </td>
                            <td>
                                <Select defaultValue="" style={{ width: 120 }} onChange={handleChange}>
                                    <Option value="">展示所有</Option>
                                    <Option value="同意">同意</Option>
                                    <Option value="拒绝">拒绝</Option>
                                </Select>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div style={{ marginBottom: 5, display: "flex", justifyContent: "space-between" }}>
                <div>
                    <Button style={{ marginRight: "5px" }} onClick={() => add()}>
                        新增
                    </Button>
                    <Button type="primary" onClick={start} disabled={!hasSelected} loading={loading}>
                        删除
                    </Button>
                    <span style={{ marginLeft: 8 }}>
                        {hasSelected ? `选中 ${selectedRowKeys.length} 条` : ''}
                    </span>
                </div>
                <div>
                    <Button style={{ marginRight: "5px" }} onClick={() => modify()}>
                        搜索
                    </Button>
                    <Button onClick={() => clear()}>
                        重置
                    </Button>
                </div>
            </div>
            <Table rowSelection={rowSelection} columns={columns} dataSource={data}
                pagination={
                    {
                        defaultCurrent: 1,
                        defaultPageSize: 10,
                        pageSizeOptions: [5, 10, 15, 20],
                        showSizeChanger: true,
                        showQuickJumper: true
                    }}
            />
        </div>
    )
}
